<template>
	<ls-skeleton :loading="loading">
		<view class="container">
			<view class="a">
				<u-swiper height="480" radius="8" :list="swiperList" indicator indicatorMode="line" circular></u-swiper>
				<view class="bd">
					<view class="h1">
						{{productDetail.customerName}}
					</view>
					<view class="p">
						<image mode="widthFix" src="@/static/images/pro_19.png"></image>
						<text>{{productDetail.customerAddress}}</text>
					</view>
					<view class="p">联系人：{{productDetail.contactName}}</view>
					<view class="p">手机号：{{productDetail.customerPhone}}</view>
					<!-- <button type="default" class="btn" size="mini">
					<image mode="widthFix" src="../../static/images/pro_20.png"></image> 联系我们
				</button> -->
					<view class="btn border-green text-green" @click="contact(productDetail.contactPhone)">
						<image mode="widthFix" src="@/static/images/pro_20.png"></image>
						<text>联系我们</text>
					</view>
					<view class="last">{{productDetail.evalCount}}人评价 · 好评度 {{productDetail.evalCount}}%</view>
				</view>
			</view>
			<view class="uni-list b" v-if="evalList.length > 0">
				<view class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in evalList" :key="index">
					<view class="uni-list-cell-db">
						<view class="uni-flex">
							<view style="padding-right: 20rpx;"
								@click="goUrl('/pages/users/user_info/index?uid=' + item.userInfoId)">
								<u-image width="80" height="80" shape="circle" :src="item.headImgUrl"
									:lazy-load="true"></u-image>
							</view>
							<view class="uni-flex-item">
								<view class="h3">{{item.userName}}</view>
								<view class="p">{{item.evalContent}}</view>
								<view class="ul" v-if="item.evalImageUrls">
									<block
										v-if="Object.prototype.toString.call(item.evalImageUrls) === '[object Array]'">
										<u-album :urls="item.evalImageUrls || '/static/images/default_avatar.png'"
											singleSize="218" :multipleSize="218" :space="10"></u-album>
									</block>	
								</view>
								<view class="uni-inline-item time">
									<view class="uni-flex-item">{{$util.dateFormat(item.createTime)}}</view>
									<u-icon name="chat" size="40" labelSize="26" :label="item.evalCount"
										@click="replyChange(item.evaluationId)"></u-icon>
									<u-icon name="thumb-up" size="40" labelSize="26"
										:color="item.isHand == 'N' || '#06A972'" :label="item.handCount"
										@click="handlerLike(index, item.evaluationId)"></u-icon>
									<!-- <view class="zan">
									<image mode="widthFix" src="@/static/images/ly.png"></image>
									<text>{{item.evalCount}}</text>
								</view>
								<view class="zan">
									<image class="collection" mode="widthFix"
										:src="item.isHand == 'N' ? '../../../static/images/pro_21.png' : '../../../static/images/zan_on.png'"
										></image>
									<text>{{item.handCount}}</text>
								</view> -->
								</view>
								<view class="lists">
									<view class="uni-flex" v-for="(e, i) in item.evalReplyList" :key="i"
										v-show="i < item.showCount">
										<image mode="widthFix"
											:src="e.headImgUrl || '/static/images/default_avatar.png'" class="pic"
											@click="goUrl('/pages/users/user_info/index?uid=' + item.userInfoId)"></image>
										<view class="uni-flex-item">
											<view class="h3">{{e.userName}}</view>
											<view class="p">{{e.evalContent}}</view>
										</view>
									</view>
								</view>
								<!-- <view class="flex-row row-between row-bottom" v-show="replyShow">
								<u-textarea v-model="content" :focus="focus" height="200" placeholder="这一刻的想法..." border="none"></u-textarea>
								<view class="pd-20">
									<u-button type="primary" text="回复" @click="reply(item.evaluationId)"></u-button>
								</view>
							</view> -->
								<view class="ft" v-if="item.evalReplyList.length > item.showCount" @click="setAll(item, index)">
									<!-- <view class="btn" @click="allEval">查看全部评价</view> -->
									<view class="btn">查看全部评价</view>
									<!-- <button type="default" class="btn" size="mini"><text>查看全部评价</text></button> -->
								</view>
								<view class="ft" v-else-if="item.evalReplyList.length == item.showCount" @click="setAll(item, index, 3)">
									<view class="btn">收起</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<u-modal :show="replyShow" title="评论" @confirm="reply" @cancel="replyShow = false" showCancelButton>
				<u--textarea placeholder="这一刻的想法..." border="surround" height="200" v-model="content"
					type="number"></u--textarea>
			</u-modal>
			<view class="footer">
				<u-button type="primary" color="#06A972" text="我要留言" @click="goEval"></u-button>
			</view>
		</view>
	</ls-skeleton>
</template>


<script>
	import {
		ShareEval,
		getEvalList
	} from "@/api/share.js";
	import {
		getCustomerDetailC
	} from "@/api/cus";
	export default {
		data() {
			return {
				productDetail: {},
				evalList: [],
				swiperList: [],
				replyShow: false,
				content: '',
				evaluationId: 0,
				showCount: 3,
				loading: true,
			}

		},

		onLoad(option) {
			console.log(option)
			let that = this;
			that.customerId = option.customerId || 0;
			if (!that.customerId) {
				return this.$util.Tips({
					title: '商家不存在'
				}, {
					tab: 3
				});
			}
			that.getCustomerDetail();
			// that.getshareEvalType();
		},

		onShow() {
			let that = this;
			that.getshareEvalType();
		},

		methods: {
			topSwiperTab(e) {
				var that = this;
				this.topSwiperIndex = Number(e.target.current);
			},

			/**
			 * 获取商家详情
			 */
			getCustomerDetail() {
				let that = this;
				getCustomerDetailC({
					customerId: that.customerId
				}).then(res => {
					that.productDetail = res.value;
					that.swiperList.push((res.value.storeImageUrls || res.value.storeUrl))
					that.loading = false;
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},

			/**
			 * 拨打电话
			 */
			contact(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success() {
						console.log('拨打成功');
					},
					fail() {
						console.log('拨打失败');
					}
				})
			},

			/**
			 * 获取评论
			 */
			getshareEvalType() {
				let that = this;
				getEvalList({
					mainId: that.customerId,
					shareEvalType: 'CUS_INFO',
					userInfoId: that.$store.state.app.uid
				}).then(res => {
					that.evalList = res.value.list;
					that.evalList.forEach((e, i) => {
						if (e.evalImageUrls) {
							that.evalList[i].evalImageUrls = e.evalImageUrls.split(',');
						} else {
							that.evalList[i].evalImageUrls = [];
						}
						this.$set(e, 'showCount', 3);
					})
					console.log(that.evalList);
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},

			/**
			 * 点赞
			 */
			handlerLike(index, evaluationId) {
				let that = this,
					url;
				console.log(that.evalList[index].isHand);
				if (that.evalList[index].isHand == 'N') {
					that.evalList[index].isHand = 'Y';
					that.evalList[index].handCount++;
					url = 'share/hand';
				} else {
					that.evalList[index].isHand = 'N';
					that.evalList[index].handCount--;
					url = 'share/unHand';
				}
				that.$request.get(url, {
					mainId: evaluationId,
					shareEvalType: 'CUS_REPLY',
					userInfoId: that.$store.state.app.uid
				}).then(res => {
					if (that.evalList[index].isHand == 'Y') {
						that.$util.Tips({
							title: '点赞成功'
						})
					} else {
						that.$util.Tips({
							title: '点赞已取消'
						})
					}
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},

			/**
			 * 跳转到留言
			 */
			goEval() {
				let that = this;
				that.$util.Tips('/pages/merchants/comment/index?mainId=' + that.customerId);
			},

			/**
			 * 回复评论
			 */
			reply() {
				let that = this;
				ShareEval({
					mainId: that.evaluationId,
					shareEvalType: "CUS_REPLY",
					evalContent: that.content,
					userInfoId: that.$store.state.app.uid
				}).then(res => {
					that.$util.Tips({
						title: "回复成功"
					})
					that.replyShow = false;
					that.getshareEvalType();
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			},

			replyChange(evaluationId) {
				let that = this;
				that.replyShow = true;
				that.evaluationId = evaluationId;
			},

			goUrl(url) {
				let that = this;
				that.$util.Tips(url);
			},

			/**
			 * 展示和收起
			 */
			setAll(item, index, num = 0) {
				let that = this;
				if (num == 0) {
					that.$set(that.evalList[index], 'showCount', item.evalReplyList.length, true);
				} else {
					that.$set(that.evalList[index], 'showCount', num, true);
				}
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: calc(140rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
		position: relative;
	}

	.container .a {
		padding: 20rpx;
	}

	.container .a .h1 {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 45rpx;
		margin-top: 10rpx;
	}

	.container .a .p {
		margin-top: 15rpx;
		color: #979797;
	}

	.container .a .p image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 15rpx;
	}

	.container .a .last {
		color: #979797;
		font-size: 22rpx;
		margin-top: 15rpx;
	}


	.container .a .btn {
		width: 150rpx;
		padding: 10rpx 25rpx;
		font-size: 24rpx;
		/* background-color: #f3f3f3; */
		border-radius: 50rpx;
		/* box-shadow: 0px 4px 4px 0px #e4d9d9; */
		margin: 10rpx 0;
	}

	.container .a .btn image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}



	/* .container .a .btn {
		vertical-align: middle;
		color: #06A972;
		font-size: 28rpx;
		border-radius: 60rpx;
		border-color: #06A972;
		margin-top: 15rpx;
	} */

	.container .a .bd {
		padding: 20rpx 20rpx 0;
	}

	.container .uni-list {
		margin: 0 30rpx;
		padding: 0;
		border-top: 1rpx solid #F2F2F2;
	}

	.container .b .uni-list-cell-pd {
		padding: 22rpx 0;
		border-bottom: 1rpx solid #F2F2F2;
	}

	.container .b .pic {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.container .b .p {
		padding: 15rpx 0;
	}

	.container .b .uni-inline-item {
		line-height: 36rpx;
	}

	.container .b .star image {
		width: 17rpx;
		height: 17rpx;
		margin-right: 5rpx;
	}

	.container .b .h3 {
		font-weight: bold;
		margin-top: 10rpx;
	}

	/* .container .b .ul {
		display: flex;
		flex-wrap: wrap;
		margin: -13rpx;
	}

	.container .b .ul>view {
		width: 30%;
		box-sizing: border-box;
		padding: 13rpx;
	}

	.container .b .ul>view image {
		border-radius: 10rpx;
	} */

	.container .b .time {
		color: #979797;
		font-size: 24rpx;
		margin: 10rpx 0;
	}

	.container .b .time .u-icon~.u-icon {
		margin-left: 20rpx;
	}

	.container .b .time image {
		width: 26rpx;
		height: 26rpx;
		margin-left: 40rpx;
		margin-right: 10rpx;
	}

	.container .b .ft {
		margin-top: 20rpx;
		display: inline-block;
	}

	.container .b .ft .btn {
		/* width: 150rpx; */
		padding: 8rpx 30rpx;
		font-size: 24rpx;
		background-color: #f3f3f3;
		border-radius: 50rpx;
		/* box-shadow: 0px 2px 3px 0px #e4d9d9; */
		margin: 10rpx 0;
	}

	.container .b .ft button {
		width: 210rpx;
		height: 50rpx;
		border: none;
		padding: 0;
		line-height: 50rpx;
		color: #666;
		background: #F3F3F3;
		border-radius: 25rpx;
		font-size: 24rpx;
	}

	.container .b .ft button text::after {
		content: " ";
		display: inline-block;
		width: 0;
		height: 0;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-left: 4px solid #999;
		margin-left: 5px;
	}

	.u-textarea {
		background-color: #f4f5f7 !important;
	}

	.pd-20 {
		padding: 0 20rpx;
	}

	.lists {
		font-size: 24rpx;
	}
</style>